<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script language="javascript">

oDivs = new Array();
iDivs = 0;
ie = document.all ? true : false;
function yo (s, x, y) {
	if (ie) oDivs[iDivs] = new Array (eval('yo'+s).style, iXTo, iYTo, x, y);
	else oDivs[iDivs] = new Array (eval('document.yo'+s), iXTo, iYTo, x, y);
	iDivs++;
}
iXTo = 200;
iYTo = 200;
function setMove(e) {
	if (ie) {
		iXTo = event.x;
		iYTo = event.y;
	}
	else {
		iXTo = e.pageX;
		iYTo = e.pageY;
	}
}
function move() {
	x = iXTo;
	y = iYTo;
	for (var i=0; i<iDivs; i++) {
		oDivs[i][1] = oDivs[i][1] * 0.5 + x * 0.5;
		oDivs[i][2] = oDivs[i][2] * 0.5 + y * 0.5;
		oDivs[i][0].left = oDivs[i][1] + oDivs[i][3];
		oDivs[i][0].top =  oDivs[i][2] + oDivs[i][4];
		x = oDivs[i][1];
		y = oDivs[i][2];
	}
}
function dont () {
	event.returnValue = false;
}
iLastS = -1;
function plupp () {
	time = new Date ();
	iS = time.getSeconds();
	if (iS != iLastS) {
		iLastS = iS;
		iS = 2 * 3.1415 * time.getSeconds() / 60;
		iM = 2 * 3.1415 * time.getMinutes() / 60;
		iH = 2 * 3.1415 * time.getHours() / 12 + 31.415 * parseInt (time.getMinutes() / 5) / 720;
		for (var i=13;i<16;i++) {
			oDivs[i][3] = Math.sin(iS) * (45 - (i-13)*16) - 15;
			oDivs[i][4] = -Math.cos(iS) * (45 - (i-13)*16) - 3;
		}
		for (var i=16;i<19;i++) {
			oDivs[i][3] = Math.sin(iM) * (37 - (i-16)*10) - 15;
			oDivs[i][4] = -Math.cos(iM) * (37 - (i-16)*10) - 3;
		}
		for (i=19;i<22;i++) {
			oDivs[i][3] = Math.sin(iH) * (27 - (i-19)*7) - 15;
			oDivs[i][4] = -Math.cos(iH) * (27 - (i-19)*7) - 3;
		}
	}
}
</script>
<style>
.crap { font-family:verdana;color:orange;font-size:10px;cursor:default;width:30px;text-align:center; }A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline; color: #005572 }
</style>
</head>

<!-- <body onMouseMove="setMove()" onSelectStart="dont()"> -->
<body onMouseMove="setMove()" onSelectStart="dont()">
마우스를 이리저리 움직여보세요.
<div id="yo0" class="crap" style="position:absolute;left:135;top:135;; z-index: 2"></div>
<div id="yo1" class="crap" style="position:absolute;left:200;top:200;; z-index: 4">12</div>
<div id="yo2" class="crap" style="position:absolute;left:200;top:200;; z-index: 5">1</div>
<div id="yo3" class="crap" style="position:absolute;left:200;top:200;; z-index: 6">2</div>
<div id="yo4" class="crap" style="position:absolute;left:200;top:200;; z-index: 7">3</div>
<div id="yo5" class="crap" style="position:absolute;left:200;top:200;; z-index: 8">4</div>
<div id="yo6" class="crap" style="position:absolute;left:200;top:200;; z-index: 9">5</div>
<div id="yo7" class="crap" style="position:absolute;left:200;top:200;; z-index: 10">6</div>
<div id="yo8" class="crap" style="position:absolute;left:200;top:200;; z-index: 11">7</div>
<div id="yo9" class="crap" style="position:absolute;left:200;top:200;; z-index: 12">8</div>
<div id="yo10" class="crap" style="position:absolute;left:200;top:200;; z-index: 13">9</div>
<div id="yo11" class="crap" style="position:absolute;left:200;top:200;; z-index: 14">10</div>
<div id="yo12" class="crap" style="position:absolute;left:200;top:200;; z-index: 15">11</div>

<div id="yo13" class="crap" style="position:absolute;left:200;top:200;; z-index: 16"><img src="img/plupp.gif" width=5 height=5 alt="" border="0"></div>
<div id="yo14" class="crap" style="position:absolute;left:200;top:200;; z-index: 17"><img src="img/plupp.gif" width=5 height=5 alt="" border="0"></div>
<div id="yo15" class="crap" style="position:absolute;left:200;top:200;; z-index: 18"><img src="img/plupp.gif" width=5 height=5 alt="" border="0"></div>

<div id="yo16" class="crap" style="position:absolute;left:200;top:200;; z-index: 19"><img src="img/plupp1.gif" width=5 height=5 alt="" border="0"></div>
<div id="yo17" class="crap" style="position:absolute;left:200;top:200;; z-index: 20"><img src="img/plupp1.gif" width=5 height=5 alt="" border="0"></div>
<div id="yo18" class="crap" style="position:absolute;left:200;top:200;; z-index: 21"><img src="img/plupp1.gif" width=5 height=5 alt="" border="0"></div>

<div id="yo19" class="crap" style="position:absolute;left:200;top:200;; z-index: 22"><img src="img/plupp0.gif" width=5 height=5 alt="" border="0"></div>
<div id="yo20" class="crap" style="position:absolute;left:200;top:200;; z-index: 23"><img src="img/plupp0.gif" width=5 height=5 alt="" border="0"></div>
<div id="yo21" class="crap" style="position:absolute;left:200;top:200;; z-index: 24"><img src="img/plupp0.gif" width=5 height=5 alt="" border="0"></div>

<div id="Layer1" style="position:absolute; left:97px; top:288px; width:179px; height:82px; z-index:3"></div>
<script language="javascript">

yo ("0", -65, -65);

yo ("1", -15, -58);
yo ("2", 10, -51);
yo ("3", 28, -33);
yo ("4", 35, -8);
yo ("5", 28, 17);
yo ("6", 10, 35);
yo ("7", -15, 42);
yo ("8", -40, 35);
yo ("9", -58, 17);
yo ("10", -65, -8);
yo ("11", -58, -33);
yo ("12", -40, -51);

yo ("13", -15, 0);
yo ("14", -15, 0);
yo ("15", -15, 0);

yo ("16", -15, 0);
yo ("17", -15, 0);
yo ("18", -15, 0);

yo ("19", -15, 0);
yo ("20", -15, 0);
yo ("21", -15, 0);

plupp();
setInterval ("plupp()", 200);
setInterval ("move()", 30);
if (!ie) {
	document.captureEvents (Event.MOUSEMOVE);
	document.onMouseMove = setMove;
}

</script>
</body>
</html>
 